<template>
	<div class="container">

		<template v-if="isSigned">
			<div class="header">
				<div v-if="downloadType == 1"
					style="width: 100%;height: 100%;display: flex;align-items: center;justify-content: center;">
					<img :src="downContent" style="width: 300px;height: 300px;" alt="">
				</div>


				<div v-else style="width: 100%;height: 100%;display: flex;align-items: center;justify-content: center;">
					<div style="width: 100%;">{{ downContent }}</div>
				</div>
			</div>
			<div class="tip-2">
				<div class="tip-title-2">
					<div>
						<span style="font-size: 18px; color:#6a7178;margin-right: 10px;">企业借款</span>
						<span style="font-size: 18px; color:#fe7e25;margin-right: 10px;">无中介费</span>
						<span
							style="font-size: 16px;background-color: #fe8876; color:#fff;padding: 4px 8px;border-radius: 4px;">100%安心</span>
					</div>
					<!-- <img src="../../assets/img/warn.png" alt="" style="    filter: brightness(0) saturate(100%) invert(0.6) sepia(1) hue-rotate(-20deg) saturate(500%) brightness(1.1);
    filter: brightness(0) saturate(100%) invert(0.6) sepia(1) hue-rotate(-20deg) saturate(500%) brightness(1.1);
" />
 <span>【温馨提示】</span> -->
				</div>
				<div class="tip-content-2">
					温馨提示:
					<p>1.可借额度根据企业的开票纳税情况计算的初审额度，后续将根据您的个人征信信息给出审核结果。</p>
					<p>2.本额度为初审额度，实际额度利息以合作行审批为准，申请人需为企业法定代表人，个体经营户个人独资企业投资者，合伙企业执行事务合伙人。</p>
					<p>3.本次初审仅本人申请有效，初审通过后2个工作日之内，联系客户经理领取，否则将取消本次初审额度，后续需重新申请(首次批款占总额度30%-50%，激活账户后额度全部可使用)</p>
				</div>
			</div>
		</template>

		<template v-else>
			<div class="header">
				<div class="header-company">企业名称：{{ companyName }}</div>
				<div class="title">可用额度(元)</div>
				<div class="can-use-num">
					<CountUp ref="countUpRef" class="count-up" :aria-disabled="limitFreeze == -1 ? false : true" />
				</div>
				<div class="total-num">授信总额度(元){{ totalNum || '****' }}</div>
				<div class="submit-btn" :aria-disabled="limitFreeze == -1 ? false : true" @click="handleClick">{{
					limitFreeze == -1 ? '去签约' : '额度已冻结' }}</div>

				<div :style="`display: flex;justify-content:center;padding: 10px 40px;`">
					<div v-if="usedAmount" class="total-num">已提款额度(元){{ usedAmount || '****' }}</div>
					<!-- <div class="total-num" v-if="moneyRate">年化利率{{ moneyRate || 0 }}%</div> -->
				</div>

			</div>
			<!-- <div class="tip">
				<div class="tip-title">
					<img src="../../assets/img/warn.png" alt="" /> <span>【温馨提示】</span>
				</div>
				<div class="tip-content">{{ tip2 }}</div>
			</div> -->
			<div class="tip-2">
				<div class="tip-title-2">
					<div>
						<span style="font-size: 18px; color:#6a7178;margin-right: 10px;">企业借款</span>
						<span style="font-size: 18px; color:#fe7e25;margin-right: 10px;">无中介费</span>
						<span
							style="font-size: 16px;background-color: #fe8876; color:#fff;padding: 4px 8px;border-radius: 4px;">100%安心</span>
					</div>
				</div>
				<div class="tip-content-2">
					温馨提示:
					<p>1.可借额度根据企业的开票纳税情况计算的初审额度，后续将根据您的个人征信信息给出审核结果。</p>
					<p>2.本额度为初审额度，实际额度利息以合作行审批为准，申请人需为企业法定代表人，个体经营户个人独资企业投资者，合伙企业执行事务合伙人。</p>
					<p>3.本次初审仅本人申请有效，初审通过后2个工作日之内，联系客户经理领取，否则将取消本次初审额度，后续需重新申请(首次批款占总额度30%-50%，激活账户后额度全部可使用)</p>
				</div>
			</div>
		</template>

		<div class="loading-container" v-if="loading">
			<div class="loading"></div>
			<div class="loading-text">审核中</div>
		</div>
	</div>
	<TipDialog ref="dialogRef" />
</template>

<script lang="ts" setup>
import { onMounted, ref } from 'vue';
import * as api from '../../api/index';
import TipDialog from '../../components/Dialog.vue';
import eventBus from '../../utils/eventBus.ts';
import CountUp from './CountUp.vue';

const dialogRef = ref();
const countUpRef = ref();
const totalNum = ref(0);
const companyName = ref('')

const query = Object.fromEntries(new URL(window.location.href).searchParams);
const id = query.id;
const tip2 = ref('');
const tip3 = ref('');
const loading = ref(false);
const limitFreeze = ref(null) // 额度冻结
const usedAmount = ref(0)

const downloadType = ref(null) // 下载方式

const downContent = ref('')

const nodes = ref(null)

const signature = ref(null)

// const moneyRate = ref('')

const isSigned = ref(false) // 用于展示是否签约

onMounted(async () => {
	if (!id) {
		alert('无效的链接');
		return;
	}

	try {
		// 获取结果数据
		const res = await api.getResult(id);
		const data: any = res.data;
		companyName.value = data.companyName
		const amount = data.quotaAmount * 10000; // 总额度
		const useAmount = data.usedAmount * 10000; // 已提额度

		countUpRef.value.start(amount - useAmount); // 初始化可用额度显示

		setTimeout(() => {
			totalNum.value = amount;
			usedAmount.value = useAmount;
		}, 3000);

		limitFreeze.value = data.limitFreeze; // 额度是否冻结
		signature.value = data.signature; // 是否签合同
		// moneyRate.value = data.moneyRate; // 年化利率
		downloadType.value = data.downloadType
		nodes.value = data.nodes


		// 没有冻结
		if (data.limitFreeze == -1) {
			handleNodeLogic(data, amount, useAmount);
		}

		// 获取提示信息
		const [tip2Res, tip3Res] = await Promise.all([
			api.getTipByCode('code2'),
			api.getTipByCode('code3'),
		]);
		tip2.value = tip2Res.content;
		tip3.value = tip3Res.content;
	} catch (error) {
		console.error('获取数据失败：', error);
	}
});

// 节点逻辑处理
function handleNodeLogic(data: any, amount: number, useAmount: number) {
	switch (data.nodes) {
		case 1: // 未签约节点
			handleUnsignedNode(data);
			break;

		case 2: // 已签约节点
			handleSignedNode(data, amount, useAmount);
			break;

		default:
			console.warn('未知的节点类型：', data.nodes);
	}
}

// 处理未签约节点
function handleUnsignedNode(data: any) {
	if (data.signature === -1) {
	} else if (data.signature === 1) {
		// 已签名
		dialogRef.value.show({ content: '已签约合同，等待后台审核' });
	}
}

// 处理已签约节点
function handleSignedNode(data: any, amount: number, useAmount: number) {

	// setTimeout(() => {
	// 	totalNum.value = amount;
	// 	usedAmount.value = useAmount;
	// }, 6000);

	downContent.value = data.downloadContent;
}


const handleClick = () => {
	loading.value = true;

	if (nodes.value === 2) {
		setTimeout(() => {
			isSigned.value = true
			loading.value = false
		}, 3000)

	} else {
		if (signature.value == -1) { // 未签合同
			setTimeout(() => {
				loading.value = false;
				dialogRef.value.show({
					content: tip3.value, buttonText: '查看详情', onButtonClick: () => {
						window.location.href = './agreement.html?id=' + id;
					}
				});
			}, 3000);
		} else { // 已签合同
			loading.value = false;
			dialogRef.value.show({ content: '已签约合同，等待后台审核' });
		}
	}





};

eventBus.on('message', (msg: string) => {
	dialogRef.value.show({ content: msg });
});
</script>

<style scoped lang="less">
.container {
	width: 100%;
	min-height: 100%;
	background: #F5F6F8 url('../../assets/img/bg.png') no-repeat top center;
	background-size: contain;
	padding-top: 50px;

	.header {
		position: relative;
		margin: auto;
		width: 347px;
		height: 313px;
		background: #FFFFFF;
		box-shadow: 0 3px 10px 1px rgba(74, 148, 253, 0.1);
		border-radius: 12px;
		border: 3px solid;
		border-image: linear-gradient(180deg, rgba(181, 211, 255, 1), rgba(255, 255, 255, 0)) 3 3;
		text-align: center;

		.header-company {
			position: absolute;
			top: 10px;
			left: 10px;
			font-size: 12px;
		}

		.title {
			color: #495874;
			margin-top: 42px;
		}

		.can-use-num {
			color: #1875FE;
			font-size: 40px;
			line-height: 47px;
			margin-top: 11px;
			font-weight: bold;

			.count-up[aria-disabled="false"]:hover {
				background-color: #0056b3;
			}

			.count-up[aria-disabled="true"] {
				color: #9e9e9e;
				border-color: #ccc;
				cursor: not-allowed;
				pointer-events: none;
			}
		}

		.total-num {
			color: #7E8BA0;
			font-size: 12px;
			margin-top: 10px;
		}

		.submit-btn {
			display: block;
			width: 304px;
			color: #ffffff;
			border-radius: 44px;
			height: 44px;
			line-height: 44px;
			text-align: center;
			border: 0;
			margin: 38px auto 0;
			background-color: #217DFE;
			overflow: hidden;
			font-weight: bold;

			&:after {
				--pos: 50%;
				--per: 6%;
				content: '';
				width: 88px;
				height: 88px;
				position: absolute;
				right: 20px;
				top: -22px;
				background: linear-gradient(135deg,
						transparent 0%,
						transparent calc(var(--pos) - var(--per)),
						rgba(255, 255, 255, 0.2) calc(var(--pos) - var(--per)),
						rgba(255, 255, 255, 0.4) var(--pos),
						rgba(255, 255, 255, 0.2) calc(var(--pos) + var(--per)),
						transparent calc(var(--pos) + var(--per)),
						transparent 100%);
				filter: blur(1px);
			}
		}

		.submit-btn[aria-disabled="false"]:hover {
			background-color: #0056b3;
		}

		.submit-btn[aria-disabled="true"] {
			background-color: #e0e0e0;
			color: #9e9e9e;
			border-color: #ccc;
			cursor: not-allowed;
			pointer-events: none;
		}
	}

	.tip {
		width: 347px;
		height: 131px;
		margin: 31px auto 0;
		background: #E7EEF9;
		border-radius: 12px;
		color: #217DFE;

		.tip-title {
			display: flex;
			align-items: center;
			padding: 13px;

			img {
				width: 18px;
				height: 18px;
				margin-top: -2px;
			}
		}

		.tip-content {
			font-size: 12px;
			padding: 0 22px;
		}
	}

	.tip-2 {
		width: 347px;
		// height: 131px;
		margin: 31px auto 0;
		background: #fff7f5;
		border-radius: 12px;
		color: #fe7e25;

		.tip-title-2 {
			display: flex;
			align-items: center;
			padding: 13px;

			img {
				width: 18px;
				height: 18px;
				margin-top: -2px;
			}
		}

		.tip-content-2 {
			font-size: 12px;
			padding: 0 12px 12px;
			color: #fe7e25;
		}
	}

	.loading-container {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: rgba(0, 0, 0, .5);
		z-index: 999;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;

		.loading {
			width: 50px;
			height: 50px;
			border: 4px solid rgba(255, 255, 255, 0.7);
			border-radius: 50%;
			border-top-color: #217DFE;
			animation: spin 1s linear infinite;
		}

		@keyframes spin {
			0% {
				transform: rotate(0deg);
			}

			100% {
				transform: rotate(360deg);
			}
		}

		.loading-text {
			color: #fff;
			margin-top: 20px;
		}
	}
}
</style>
